<template>
  <div class="cell" :class="{ active: item.active }" v-for="item in userList" :key="item.id" @click="handleClickUser(item)">
    <el-avatar :size="item.active ? 60 : 40" :src="circleUrl" />
    <div class="name">{{ item.truename }}</div>
  </div>
</template>
<script setup lang="ts">
import IUsers from '../../interface/IUsers'

const circleUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
defineProps<{ userList: IUsers[] }>()
const emits = defineEmits(['clicked'])
const handleClickUser = (item: any) => {
  emits('clicked', item)
}
</script>

<style lang="scss" scoped>
.cell {
  cursor: pointer;
  .name {
    font-size: 14px;
  }
  & + .cell {
    margin-top: 20px;
  }
}
</style>
